﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手风琴</title>
	<style>
	h1{text-align:center;}
	.accordion{width:600px;margin:0 auto;}
	.accordion h4{margin:0;padding:0 15px;height:50px;line-height:50px;border-bottom:1px solid rgba(255,255,255,.2);background-color:#2196F3;}
	.accordion .content{padding:15px;border:1px solid #ddd;height:160px;}
	</style>
   <script src="../../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script>
		$(function(){
			$('.content').hide();
			$('.accordion h4').click(function () {
			    console.log($(this).next());

				$(this).next().show(200).siblings().not('h4').hide(200);
			})
		})
	</script>
</head>
<body>
	<h1>手风琴</h1>
	<div class="accordion">
		<h4>标题1</h4>
		<div class="content">内容1</div>
		<h4>标题2</h4>
		<div class="content">内容2</div>
		<h4>标题3</h4>
		<div class="content">内容3</div>
		<h4>标题4</h4>
		<div class="content">内容4</div>
		<h4>标题5</h4>
		<div class="content">内容5</div>
	</div>
</body>
</html>